@checkbox-size: 14px;

.checkbox {
    cursor: pointer;

    display: inline-flex;
    gap: var(--margin-xs);
    align-items: center;

    box-sizing: border-box;

    font-size: var(--font-size-sm);
    color: var(--text-color);

    &:hover {
        .checkbox-target-input {
            &:checked + .checkbox-target-inner {
                background-color: rgb(var(--primary-color-hover));
            }
        }

        .checkbox-target-inner {
            border-color: rgb(var(--primary-color-hover));
        }
    }

    &-disabled {
        cursor: not-allowed;
        color: rgb(var(--grey-300));

        .checkbox-target-input {
            &:checked + .checkbox-target-inner {
                background-color: rgb(var(--grey-300));
            }
        }

        .checkbox-target-inner {
            border-color: rgb(var(--grey-300));
        }

        &:hover {
            .checkbox-target-input {
                &:checked + .checkbox-target-inner {
                    background-color: rgb(var(--grey-300));
                }
            }

            .checkbox-target-inner {
                border-color: rgb(var(--grey-300));
            }
        }

        &.checkbox-indeterminate {
            .checkbox-target-inner {
                background-color: rgb(var(--grey-300));
            }
        }
    }

    &-indeterminate {
        .checkbox-target {
            &-inner {
                background-color: rgb(var(--primary-color));

                &::after {
                    top: 50%;
                    left: 50%;
                    width: calc(100% - 2px);
                    height: 2px;
                    background-color: rgb(var(--bg-color-secondary));
                    border: none;
                    border-radius: var(--border-radius-base);
                    opacity: 1;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }

    &-target {
        position: relative;

        &-input {
            position: absolute;
            opacity: 0;

            &:checked + .checkbox-target-inner {
                background-color: rgb(var(--primary-color));

                &::after {
                    transform: rotate(45deg) scale(1);
                    opacity: 1;
                    border-color: rgb(var(--bg-color-secondary));
                }
            }
        }

        &-inner {
            position: relative;

            overflow: hidden;
            display: block;

            box-sizing: border-box;
            width: @checkbox-size;
            height: @checkbox-size;

            border: 1px solid rgb(var(--primary-color));
            border-radius: var(--border-radius-base);

            transition: all 0.15s;

            &::after {
                content: '';

                position: absolute;
                top: calc(50% - 5.5px);
                left: calc(50% - 2.5px);
                transform-origin: center center;
                transform: rotate(45deg) scale(0);

                display: block;

                box-sizing: border-box;
                width: calc(@checkbox-size / 2.6);
                height: calc(@checkbox-size / 1.5);

                opacity: 0;
                border: 2px solid transparent;
                border-top: 0;
                border-left: 0;

                transition: all 0.15s;
            }
        }
    }
}
